

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/zoro.jpg">
  <link rel="icon" href="/img/zoro.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#efb9b9">
  <meta name="description" content="">
  <meta name="author" content="AgoniLay">
  <meta name="keywords" content="">
  
  <title>HTML笔记 - AgoniLay的博客</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/arta.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/scroller.css">
<link rel="stylesheet" href="/css/bynode.css">
<link rel="stylesheet" href="/css/mouse.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"agonilay.github.io","root":"/","version":"1.8.11","typing":{"enable":true,"typeSpeed":150,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading2.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>AgoniLay</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" target="_self" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="iconfont icon-bookmark"></i>
                索引
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                
                  
                  
                  
                  <a class="dropdown-item" href="/archives/">
                    <i class="iconfont icon-archive-fill"></i>
                    归档
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/categories/">
                    <i class="iconfont icon-category-fill"></i>
                    分类
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/tags/">
                    <i class="iconfont icon-tags-fill"></i>
                    标签
                  </a>
                
              </div>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
          
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/zoro2.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h3" id="subtitle" title="HTML笔记">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      AgoniLay
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-08-03 16:40" pubdate>
        2021年8月3日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      128
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
			
			
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">HTML笔记</h1>
            
            <div class="markdown-body">
              <h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><p>是最基础的网页开发语言</p>
<p>Hyper Text Markup Language 超文本标记语言</p>
<ul>
<li>超文本:<ul>
<li>超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.</li>
</ul>
</li>
<li>标记语言:<ul>
<li>由标签构成的语言。&lt;标签名称&gt; 如 html，xml</li>
<li>标记语言不是编程语言</li>
</ul>
</li>
</ul>
<h2 id="快速入门"><a href="#快速入门" class="headerlink" title="快速入门"></a>快速入门</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><ol>
<li><p>html文档后缀名 .html 或者 .htm</p>
</li>
<li><p>标签分为</p>
<ol>
<li>围堵标签：有开始标签和结束标签。如 <code>&lt;html&gt;&lt;/html&gt;</code> </li>
<li>自闭合标签：开始标签和结束标签在一起。如 <code>&lt;br/&gt;</code> </li>
</ol>
</li>
<li><p>标签可以嵌套：</p>
</li>
</ol>
<p>  需要正确嵌套，不能你中有我，我中有你</p>
<ul>
<li><p>错误：<code>&lt;a&gt;&lt;b&gt;&lt;/a&gt;&lt;/b&gt;</code> </p>
</li>
<li><p>正确：<code>&lt;a&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;</code> </p>
</li>
</ul>
<ol start="4">
<li><p>在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来</p>
</li>
<li><p>html的标签不区分大小写，但是建议使用小写。</p>
</li>
</ol>
<ul>
<li>代码：  <figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">FONT</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&#x27;red&#x27;</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">FONT</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">font</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&#x27;green&#x27;</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">font</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></div></td></tr></table></figure></li>
</ul>
<h3 id="标签学习"><a href="#标签学习" class="headerlink" title="标签学习"></a>标签学习</h3><h4 id="文件标签"><a href="#文件标签" class="headerlink" title="文件标签"></a>文件标签</h4><p>构成html最基 本的标签</p>
<ul>
<li>html : html文档的根标签</li>
<li>head : 头标签。用于指定html文档的一些属性。引入外部的资源</li>
<li>title : 标题标签</li>
<li>body : 体标签</li>
<li><code>&lt;!DOCTYPE html&gt;</code> : html5 中定义该文档是 html文档</li>
</ul>
<h4 id="文本标签"><a href="#文本标签" class="headerlink" title="文本标签"></a>文本标签</h4><p>和文本有关的标签</p>
<ul>
<li><p>注释：<!-- 注释内容 --></p>
</li>
<li><p>标题标签 : <code>&lt;h1&gt; ... &lt;h6&gt;</code></p>
<ul>
<li>h1 ~ h6 : 字体大小逐渐递减</li>
</ul>
</li>
<li><p><code>&lt;p&gt;&lt;/p&gt;</code> : 段落标签</p>
</li>
<li><p><code>&lt;br/&gt;</code> 或 <code>&lt;br&gt;</code> ：换行标签</p>
</li>
<li><p><code>&lt;hr&gt;</code> : 展示一条水平线</p>
<p>属性：</p>
<ul>
<li>color：颜色</li>
<li>width：宽度</li>
<li>size：高度</li>
<li>align：对其方式<ul>
<li>center：居中</li>
<li>left：左对齐</li>
<li>right：右对齐</li>
</ul>
</li>
</ul>
</li>
<li><p><code>&lt;b&gt;&lt;/b&gt;</code> : 字体加粗</p>
</li>
<li><p><code>&lt;i&gt;&lt;/i&gt;</code> : 字体斜体</p>
</li>
<li><p><code>&lt;font&gt;&lt;/font&gt;</code> : 字体标签</p>
<p>属性：</p>
<ul>
<li>color：颜色</li>
<li>size：大小</li>
<li>face：字体</li>
</ul>
</li>
<li><p><code>&lt;center&gt;&lt;/center&gt;</code> : 文本居中</p>
</li>
</ul>
<h4 id="属性定义"><a href="#属性定义" class="headerlink" title="属性定义"></a>属性定义</h4><ul>
<li>color：<ol>
<li>英文单词：red,green,blue</li>
<li>rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)</li>
<li>#值1值2值3：值的范围：00~FF之间。如： #FF00FF</li>
</ol>
</li>
<li>width：<ol>
<li>数值：<code>width=&#39;20&#39;</code> 数值的单位默认是 px(像素)</li>
<li>数值%：占比相对于父元素的比例</li>
</ol>
</li>
</ul>
<h4 id="图片标签"><a href="#图片标签" class="headerlink" title="图片标签"></a>图片标签</h4><p><code>&lt;img src=&quot;&quot;&gt;</code> : 展示图片</p>
<div class="hljs code-wrapper"><pre><code>    * 属性：
        * src：指定图片的位置
</code></pre></div>
<h4 id="列表标签"><a href="#列表标签" class="headerlink" title="列表标签"></a>列表标签</h4><p>有序列表：</p>
<p><code>&lt;ol&gt;&lt;li&gt;&lt;/li&gt;&lt;/ol&gt;</code> </p>
<p>无序列表：</p>
<p><code>&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;</code> </p>
<p>自定义列表：</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">dl</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>自定义列表题目<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>内容描述1<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>内容描述2<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h4 id="链接标签"><a href="#链接标签" class="headerlink" title="链接标签"></a>链接标签</h4><p><code>&lt;a href=&quot;&quot; target=&quot;&quot;&gt;&lt;/a&gt;</code> : 定义一个超链接</p>
<p>属性：</p>
<ul>
<li>href：指定访问资源的URL(统一资源定位符)</li>
<li>target：指定打开资源的方式<ul>
<li><code>_self</code> : 默认值，在当前页面打开</li>
<li><code>_blank</code> : 在空白页面打开</li>
</ul>
</li>
</ul>
<h4 id="div-amp-span"><a href="#div-amp-span" class="headerlink" title="div &amp; span"></a>div &amp; span</h4><ul>
<li><code>&lt;div&gt;&lt;/div</code> : 每一个div占满一整行，块级标签；</li>
<li><code>&lt;span&gt;&lt;/span&gt;</code> : 文本信息在一行展示，行内标签，内联标签</li>
</ul>
<h4 id="语义化标签"><a href="#语义化标签" class="headerlink" title="语义化标签"></a>语义化标签</h4><p>html5 中为了提高程序的可读性，提供了一些标签</p>
<ul>
<li><code>&lt;header&gt;&lt;/header&gt;</code> : 页眉</li>
<li><code>&lt;footer&gt;&lt;/footer&gt;</code> : 页脚</li>
</ul>
<h4 id="表格标签"><a href="#表格标签" class="headerlink" title="表格标签"></a>表格标签</h4><p><code>&lt;table&gt;&lt;/table&gt;</code> : 定义表格</p>
<ul>
<li>width：宽度</li>
<li>border：边框</li>
<li>cellpadding：定义内容和单元格的距离</li>
<li>cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、</li>
<li>bgcolor：背景色</li>
<li>align：对齐方式</li>
</ul>
<p><code>&lt;tr&gt;&lt;/tr&gt;</code> : 定义行</p>
<ul>
<li>bgcolor：背景色</li>
<li>align：对齐方式</li>
</ul>
<p><code>&lt;td&gt;&lt;/td&gt;</code> : 定义单元格</p>
<ul>
<li>colspan：合并列 左右</li>
<li>rowspan：合并行 上下 先上 先左</li>
</ul>
<p><code>&lt;th&gt;&lt;/th&gt;</code> : 定义表头单元格</p>
<p><code>&lt;caption&gt;&lt;/caption&gt;</code> : 表格标题，在table内写</p>
<p><code>&lt;thead&gt;&lt;/thead&gt;</code> : 表示表格的头部分</p>
<p><code>&lt;tbody&gt;&lt;/tbody&gt;</code> : 表示表格的体部分</p>
<p><code>&lt;tfoot&gt;&lt;/tfoot&gt;</code> : 表示表格的脚部分</p>
<h3 id="表单标签"><a href="#表单标签" class="headerlink" title="表单标签"></a>表单标签</h3><h4 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h4><p>用于采集用户输入的数据的。用于和服务器进行交互。</p>
<p><code>&lt;form&gt;&lt;/form&gt;</code> : 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围</p>
<ul>
<li>属性：<ul>
<li>action : 指定提交数据的 URL</li>
<li>method : 指定提交方式，一共有七种，常用的有两种<ul>
<li>get：<ul>
<li>请求参数会在地址栏中显示。会封装到请求行中</li>
<li>请求参数大小是有限制的</li>
<li>不太安全</li>
</ul>
</li>
<li>post：<ul>
<li>请求参数不会再地址栏中显示。会封装在请求体中</li>
<li>请求参数的大小没有限制</li>
<li>较为安全</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>表单项中的数据要想被提交，必须指定其 name 属性</p>
<h4 id="表单项标签"><a href="#表单项标签" class="headerlink" title="表单项标签"></a>表单项标签</h4><h5 id="input"><a href="#input" class="headerlink" title="input"></a>input</h5><p><code>&lt;input type=&quot;&quot;&gt;&lt;/input&gt;</code> : type 属性值，改变元素展示的样式</p>
<p>type 的属性值：</p>
<table>
<thead>
<tr>
<th align="center">属性值</th>
<th align="center">作用</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">text</td>
<td align="center">文本输入框</td>
<td align="center">默认值</td>
</tr>
<tr>
<td align="center">password</td>
<td align="center">密码输入框</td>
<td align="center">内容隐藏</td>
</tr>
<tr>
<td align="center">email</td>
<td align="center">邮箱格式输入框</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">number</td>
<td align="center">仅接受数字</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">search</td>
<td align="center">搜索框</td>
<td align="center">自带 X 号，可全文删除</td>
</tr>
<tr>
<td align="center">range</td>
<td align="center">滑块</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">time</td>
<td align="center">获得小时和分钟</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">date</td>
<td align="center">获得年月日</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">month</td>
<td align="center">获得年月</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">week</td>
<td align="center">获得星期</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">color</td>
<td align="center">获得颜色</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">radio</td>
<td align="center">单选框</td>
<td align="center">多个单选框实现单选 : name属性值必须一样<br>value 属性，指定其被选中后提交的值<br>checked 属性，可以指定默认值</td>
</tr>
<tr>
<td align="center">checkbox</td>
<td align="center">复选框</td>
<td align="center">value 属性，指定其被选中后提交的值<br>checked 属性，可以指定默认值</td>
</tr>
<tr>
<td align="center">file</td>
<td align="center">文件选择框</td>
<td align="center">multiple : 多文件上传</td>
</tr>
<tr>
<td align="center">hidden</td>
<td align="center">隐藏域</td>
<td align="center">用于提交一些信息</td>
</tr>
<tr>
<td align="center">submit</td>
<td align="center">提交按钮</td>
<td align="center">点击可以提交表单</td>
</tr>
<tr>
<td align="center">button</td>
<td align="center">普通按钮</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">reset</td>
<td align="center">重置按钮</td>
<td align="center">清空 from 中全文</td>
</tr>
<tr>
<td align="center">image</td>
<td align="center">图片提交按钮</td>
<td align="center">src : 指定图片的路径</td>
</tr>
</tbody></table>
<p>属性：</p>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="center">maxlength</td>
<td align="center">控制输入最多的字符</td>
</tr>
<tr>
<td align="center">value</td>
<td align="center">默认显示数据</td>
</tr>
<tr>
<td align="center">placeholder</td>
<td align="center">指定输入框的提示信息，输入框为空时显示</td>
</tr>
<tr>
<td align="center">autofocus</td>
<td align="center">页面加载完成自动获得焦点</td>
</tr>
<tr>
<td align="center">autocomplete</td>
<td align="center">自动记录输入内容，需要提交按钮，要有name<br>参数：on || off</td>
</tr>
<tr>
<td align="center">require</td>
<td align="center">必填项</td>
</tr>
<tr>
<td align="center">accesskey</td>
<td align="center">指定聚焦到元素的快捷键，alt + 字母</td>
</tr>
<tr>
<td align="center">label</td>
<td align="center">指定输入框的文字描述信息</td>
</tr>
</tbody></table>
<p>注意：label 的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点</p>
<h5 id="select"><a href="#select" class="headerlink" title="select"></a>select</h5><p>下拉列表，子元素列表选项为 <code>&lt;option&gt;&lt;/option&gt;</code></p>
<h5 id="datalist"><a href="#datalist" class="headerlink" title="datalist"></a>datalist</h5><p>下拉列表选择，子元素 option 指定列表项 与input使用id实现链接</p>
<h5 id="textarea"><a href="#textarea" class="headerlink" title="textarea"></a>textarea</h5><p>文本域</p>
<ul>
<li>cols : 指定列数，每一行有多少个字符</li>
<li>row : 默认多少行</li>
</ul>
<h5 id="filedset"><a href="#filedset" class="headerlink" title="filedset"></a>filedset</h5><p>打包，可以将表单内的相关元素打包，分组</p>
<h2 id="文档结构和基本语法"><a href="#文档结构和基本语法" class="headerlink" title="文档结构和基本语法"></a>文档结构和基本语法</h2><h3 id="XHTML"><a href="#XHTML" class="headerlink" title="XHTML"></a>XHTML</h3><p>The Extensible HyperText Markup Language  =&gt;  可扩展标识语言</p>
<h4 id="基本结构"><a href="#基本结构" class="headerlink" title="基本结构"></a>基本结构</h4><figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 定义文档类型 doctype -&gt; document type 使用时必须大写 --&gt;</span><br><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span> <span class="hljs-meta-keyword">PUBLIC</span> <span class="hljs-meta-string">&quot;-//W3C//DTD XHTML1.0 Transitional//EN&quot;</span> <span class="hljs-meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="hljs-comment">&lt;!-- 声明文档命名空间 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 设置文档字符编码--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;Content-Type&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;text/html; charset=gb2312&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<p>XHTML 是 HTML 向 XML 过渡的标识语言</p>
<h4 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h4><ol>
<li>在文档的开头必须定义文档类型</li>
<li>在根元素中应声明命名空间，即设置 xmlns 属性</li>
<li>所有的标签都必须是闭合的</li>
<li>所有元素和属性都必须小写</li>
<li>所有的属性都必须用引号（””）括起来</li>
<li>所有标签都必须合理嵌套</li>
<li>所有属性都必须被赋值，没有值的属性就用自身来赋值 <code>&lt;td nowrap=&quot;nowrap&quot;/&gt;</code></li>
<li>所有特殊符号都用编码表示</li>
<li>不要在注释内容中使用“–”，只能出现在注释开头和结束</li>
<li>废除了 name 属性，而使用 id 属性作为统一的名称</li>
</ol>
<h3 id="HTML5"><a href="#HTML5" class="headerlink" title="HTML5"></a>HTML5</h3><h4 id="基本结构-1"><a href="#基本结构-1" class="headerlink" title="基本结构"></a>基本结构</h4><figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>...<br></code></pre></div></td></tr></table></figure>

<h4 id="基本语法-1"><a href="#基本语法-1" class="headerlink" title="基本语法"></a>基本语法</h4><h5 id="文档类型-DOCTYPE"><a href="#文档类型-DOCTYPE" class="headerlink" title="文档类型 DOCTYPE"></a>文档类型 DOCTYPE</h5><figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<ul>
<li><p>声明文档的类型，且必须位于代码的第一行</p>
</li>
<li><p>不需要向 XHTML 那么复杂，<code>&lt;!DOCTYPE html&gt;</code> 即可</p>
</li>
<li><p>使用工具时，在声明中加入 SYSTEM 识别符：<code>&lt;!DOCTYPE html SSYSTEM &quot;about:legacy-compat&quot;&gt;</code> </p>
</li>
<li><p>在 HTML5 中是不区分大小写的，引号也不区分单双</p>
</li>
<li><p>会触发浏览器以标准模式显示页面</p>
<p>浏览器显示模式：</p>
<ul>
<li>怪异模式 : Quirks</li>
<li>近标准模式 : Alomst Standards</li>
<li>标准模式（非怪异模式）: Standards</li>
</ul>
</li>
</ul>
<h5 id="字符编码-meta"><a href="#字符编码-meta" class="headerlink" title="字符编码 meta"></a>字符编码 meta</h5><figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h5 id="标记省略"><a href="#标记省略" class="headerlink" title="标记省略"></a>标记省略</h5><p>不允许写结束标记的：只允许使用 <code>&lt;br/&gt;</code> 或 <code>&lt;br&gt;</code> 这种形式</p>
<p>area base br col command embed hr img input keygen link meta param source track wbr</p>
<p>可以省略结束标记的：</p>
<p>li dt dd p rt rp optgroup option colgroup thead tbody tfoot tr td th</p>
<p>可以省略全部标记的：</p>
<p>html head body colgroup tbody</p>
<h2 id="HTML4"><a href="#HTML4" class="headerlink" title="HTML4"></a>HTML4</h2><h3 id="HTML4-元素"><a href="#HTML4-元素" class="headerlink" title="HTML4 元素"></a>HTML4 元素</h3><h4 id="结构元素"><a href="#结构元素" class="headerlink" title="结构元素"></a>结构元素</h4><table>
<thead>
<tr>
<th align="center">元素名</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">div</td>
<td align="center">在文档中定义一块区域，即包含框，容器</td>
</tr>
<tr>
<td align="center">ol</td>
<td align="center">有序列表</td>
</tr>
<tr>
<td align="center">ul</td>
<td align="center">无序列表</td>
</tr>
<tr>
<td align="center">li</td>
<td align="center">列表项</td>
</tr>
<tr>
<td align="center">dl</td>
<td align="center">自定义列表</td>
</tr>
<tr>
<td align="center">dt</td>
<td align="center">自定义列表中的词条</td>
</tr>
<tr>
<td align="center">dd</td>
<td align="center">对定义的词条进行解释</td>
</tr>
<tr>
<td align="center">del</td>
<td align="center">定义删除的文本</td>
</tr>
<tr>
<td align="center">ins</td>
<td align="center">定义插入的文本</td>
</tr>
<tr>
<td align="center">h1 ~ h6</td>
<td align="center">一级标题(最大) ~ 六级标题</td>
</tr>
<tr>
<td align="center">p</td>
<td align="center">定义段落结构</td>
</tr>
<tr>
<td align="center">hr</td>
<td align="center">定义水平线</td>
</tr>
</tbody></table>
<h4 id="内容元素"><a href="#内容元素" class="headerlink" title="内容元素"></a>内容元素</h4><table>
<thead>
<tr>
<th align="center">元素名</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">span</td>
<td align="center">在文本行中定义一个区域，即行内包含框</td>
</tr>
<tr>
<td align="center">a</td>
<td align="center">定义超链接</td>
</tr>
<tr>
<td align="center">abbr</td>
<td align="center">定义缩写词</td>
</tr>
<tr>
<td align="center">address</td>
<td align="center">定义地址</td>
</tr>
<tr>
<td align="center">dfn</td>
<td align="center">定义术语，以斜体显示</td>
</tr>
<tr>
<td align="center">kbd</td>
<td align="center">定义键盘键</td>
</tr>
<tr>
<td align="center">samp</td>
<td align="center">定义样本</td>
</tr>
<tr>
<td align="center">var</td>
<td align="center">定义变量</td>
</tr>
<tr>
<td align="center">tt</td>
<td align="center">定义打印机字体</td>
</tr>
<tr>
<td align="center">code</td>
<td align="center">定义计算机源代码</td>
</tr>
<tr>
<td align="center">pre</td>
<td align="center">定义预定义格式文本，保留源代码格式</td>
</tr>
<tr>
<td align="center">blockquote</td>
<td align="center">定义大块内容引用</td>
</tr>
<tr>
<td align="center">cite</td>
<td align="center">定义引文</td>
</tr>
<tr>
<td align="center">q</td>
<td align="center">定义引用短语</td>
</tr>
<tr>
<td align="center">strong</td>
<td align="center">定义重要文本</td>
</tr>
<tr>
<td align="center">em</td>
<td align="center">定义文本为重要</td>
</tr>
</tbody></table>
<h4 id="修饰元素"><a href="#修饰元素" class="headerlink" title="修饰元素"></a>修饰元素</h4><table>
<thead>
<tr>
<th align="center">元素名</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">b</td>
<td align="center">粗体，视觉提醒</td>
</tr>
<tr>
<td align="center">i</td>
<td align="center">斜体，语气强调</td>
</tr>
<tr>
<td align="center">big</td>
<td align="center">定义较大文本</td>
</tr>
<tr>
<td align="center">small</td>
<td align="center">定义较小文本</td>
</tr>
<tr>
<td align="center">sup</td>
<td align="center">定义上标</td>
</tr>
<tr>
<td align="center">sub</td>
<td align="center">定义下标</td>
</tr>
<tr>
<td align="center">bdi &amp; bdo</td>
<td align="center">定义文本显示方向</td>
</tr>
<tr>
<td align="center">br</td>
<td align="center">定义换行</td>
</tr>
<tr>
<td align="center">u</td>
<td align="center">非文本注解，显示下划线</td>
</tr>
</tbody></table>
<p>已废用:</p>
<p>center(定义文本居中)</p>
<p>font(定义文字的样式大小颜色)</p>
<p>s(strike的缩写) strike(定义删除线)</p>
<h3 id="HTML4-属性"><a href="#HTML4-属性" class="headerlink" title="HTML4 属性"></a>HTML4 属性</h3><h4 id="核心属性"><a href="#核心属性" class="headerlink" title="核心属性"></a>核心属性</h4><p>主要包括以下三个，为大部分元素所拥有</p>
<table>
<thead>
<tr>
<th align="center">属性名</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">class</td>
<td align="center">定义类规则或样式规则</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">定义元素的唯一标识</td>
</tr>
<tr>
<td align="center">style</td>
<td align="center">定义元素的样式声明</td>
</tr>
</tbody></table>
<p>没有这三个属性的元素：</p>
<p>html head title base meta param script style</p>
<h4 id="语言属性"><a href="#语言属性" class="headerlink" title="语言属性"></a>语言属性</h4><table>
<thead>
<tr>
<th>属性名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>lang</td>
<td>定义元素的语言代码或编码</td>
</tr>
<tr>
<td>dir</td>
<td>定义文本方向，包括 ltr(从左向右) 和 rtl 俩值</td>
</tr>
</tbody></table>
<p>没有语言属性的元素：</p>
<p>frameset frame iframe br hr base param script</p>
<h4 id="键盘属性"><a href="#键盘属性" class="headerlink" title="键盘属性"></a>键盘属性</h4><table>
<thead>
<tr>
<th>属性名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>accesskey</td>
<td>定义访问某元素的快捷键</td>
</tr>
<tr>
<td>tabindex</td>
<td>定义元素的 Tab 键索引编号</td>
</tr>
</tbody></table>
<p>使用 accesskey 可以通过（Alt + 字母 ）访问指定 URL，但浏览器不能很好的支持</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://agonilay.githib.io&quot;</span> <span class="hljs-attr">accesskey</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>按住 Alt 键，单击 A 键可以链接到我的博客<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<p>tabindex 用来定义元素的 Tab 键访问顺序</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>Tab 1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>Tab 3<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>Tab 2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<h4 id="内容属性"><a href="#内容属性" class="headerlink" title="内容属性"></a>内容属性</h4><table>
<thead>
<tr>
<th>属性名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td><strong>alt</strong></td>
<td>定义元素的替换文本（图片加载失败时）</td>
</tr>
<tr>
<td><strong>title</strong></td>
<td>定义元素的提示文本（鼠标悬停时）</td>
</tr>
<tr>
<td>longdesc</td>
<td>定义元素包含内容的大段描述信息</td>
</tr>
<tr>
<td>cite</td>
<td>定义元素包含内容的引用信息</td>
</tr>
<tr>
<td>datetime</td>
<td>定义元素包含内容的日期和时间</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;URL&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;图片无法正常显示时的替换文本&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;鼠标悬停时的提示文本&quot;</span> /&gt;</span><br></code></pre></div></td></tr></table></figure>

<h4 id="其他属性"><a href="#其他属性" class="headerlink" title="其他属性"></a>其他属性</h4><table>
<thead>
<tr>
<th>属性名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>rel</td>
<td>定义当前界面与其他界面的关系</td>
</tr>
<tr>
<td>rev</td>
<td>定义其他揭秘那与当前界面之间的链接关系</td>
</tr>
</tbody></table>
<p>区别：</p>
<ul>
<li>rel 表示从源文档到目标文档的关系</li>
<li>rev 表示从目标文档到源文档的关系</li>
</ul>
<p>用途：</p>
<ul>
<li>确定当前文档与目标文档之间的位置关系，并进行准确定义</li>
<li>方便浏览器对信息的来源进行准确判断</li>
</ul>
<h2 id="HTML5-1"><a href="#HTML5-1" class="headerlink" title="HTML5"></a>HTML5</h2><h3 id="HTML5-元素"><a href="#HTML5-元素" class="headerlink" title="HTML5 元素"></a>HTML5 元素</h3><h4 id="结构元素-1"><a href="#结构元素-1" class="headerlink" title="结构元素"></a>结构元素</h4><table>
<thead>
<tr>
<th>元素名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>header</td>
<td>页面中的一个内容区块或整个页面的标题</td>
</tr>
<tr>
<td>footer</td>
<td>表示整个页面或其中一个内容区块的注脚<br>一般会包含创作者的姓名、创作日期及联系信息</td>
</tr>
<tr>
<td>section</td>
<td>表示页面中的一个内容区块，如章节、页眉页脚…</td>
</tr>
<tr>
<td>article</td>
<td>表示页面中的一块与上线问不相关的独立内容</td>
</tr>
<tr>
<td>aside</td>
<td>表示 article 元素的内容之外的，与 article 元素的内容相关的辅助信息</td>
</tr>
<tr>
<td>nav</td>
<td>表示页面中导航链接的部分</td>
</tr>
<tr>
<td>main</td>
<td>表示页面中的主要部分</td>
</tr>
<tr>
<td>figure</td>
<td>表示一段独立的流内容，一般表示一个文档主体流内容中的一个独立单元</td>
</tr>
</tbody></table>
<h4 id="功能元素"><a href="#功能元素" class="headerlink" title="功能元素"></a>功能元素</h4><table>
<thead>
<tr>
<th>元素</th>
<th>说明</th>
<th>例子</th>
</tr>
</thead>
<tbody><tr>
<td>video</td>
<td>定义视频</td>
<td></td>
</tr>
<tr>
<td>audio</td>
<td>定义音频</td>
<td></td>
</tr>
<tr>
<td>embed</td>
<td>用于插入各种多媒体</td>
<td><code>&lt;embed src=&quot;horse.wav&quot;&gt;</code></td>
</tr>
<tr>
<td>mark</td>
<td>在视觉上向用户呈现那些需要突出显示或高亮显示的文字</td>
<td></td>
</tr>
<tr>
<td>dialog</td>
<td>定义对话框或窗口</td>
<td><code>&lt;dialog open&gt;这是打开的会话窗口&lt;/dialog&gt;</code></td>
</tr>
<tr>
<td>bdi</td>
<td>定义文本的文本方向，使其脱离周围文本的方向设置</td>
<td></td>
</tr>
<tr>
<td>figcaption</td>
<td>定义 figure 元素的标题</td>
<td></td>
</tr>
<tr>
<td>time</td>
<td>表示日期或时间，也可以同时表示两者</td>
<td></td>
</tr>
<tr>
<td>canvas</td>
<td>表示图形，如图表和其他图像</td>
<td></td>
</tr>
<tr>
<td>output</td>
<td>表示不同类型的输出</td>
<td></td>
</tr>
<tr>
<td>source</td>
<td>为媒介元素定义媒介资源</td>
<td>如：<code>&lt;video&gt;</code> <code>&lt;audio&gt;</code></td>
</tr>
<tr>
<td>menu</td>
<td>表示菜单列表</td>
<td></td>
</tr>
<tr>
<td>ruby</td>
<td>表示 ruby 注释（中文注音或字符）</td>
<td><code>&lt;ruby&gt;汉&lt;rt&gt;&lt;rp&gt;(&lt;/rp&gt;阿瓦达&lt;rp&gt;)&lt;/rp&gt;&lt;/rt&gt;&lt;ruby&gt;</code></td>
</tr>
<tr>
<td>rt</td>
<td>表示字符（中文注音或字符）的解释或发音</td>
<td></td>
</tr>
<tr>
<td>rp</td>
<td>在 ruby 中使用</td>
<td></td>
</tr>
<tr>
<td>wbr</td>
<td>表示软换行，窗口或父级元素的宽度足够时，没必要换行<br>而当宽度不够时，主动在此处进行换行</td>
<td></td>
</tr>
<tr>
<td>commend</td>
<td>表示命令按钮</td>
<td>如：单选按钮、复选框或按钮</td>
</tr>
<tr>
<td>details</td>
<td>表示用户要求得到并且可以得到的细节信息</td>
<td></td>
</tr>
<tr>
<td>summary</td>
<td>为<code>&lt;details&gt;</code>元素定义可见的标题</td>
<td></td>
</tr>
<tr>
<td>datalist</td>
<td>表示可选数据的列表，与 input 元素配合使用</td>
<td></td>
</tr>
<tr>
<td>datagrid</td>
<td>表示可选数据的列表，以树形列表的形式来显示</td>
<td></td>
</tr>
<tr>
<td>keygen</td>
<td>表示生成密钥</td>
<td></td>
</tr>
<tr>
<td>progress</td>
<td>表示运行中的进程</td>
<td></td>
</tr>
<tr>
<td>meter</td>
<td>度量给定范围内的数据</td>
<td></td>
</tr>
<tr>
<td>track</td>
<td>定义用在媒体播放器中的文本轨道</td>
<td></td>
</tr>
</tbody></table>
<h4 id="表单元素"><a href="#表单元素" class="headerlink" title="表单元素"></a>表单元素</h4><p>通过 type 属性，HTML5 为 input 元素新增了很多类型</p>
<ul>
<li>tel : 表示必须输入电话号码的文本框</li>
<li>search : 表示搜索文本框</li>
<li>url : 表示必须输入 URL 地址的文本框</li>
<li>email : 表示必须输入电子邮件地址的文本框</li>
<li>datetime : 表示日期和时间文本框</li>
<li>date : 表示日期文本框</li>
<li>month : 表示月份文本框</li>
<li>week : 表示星期文本框</li>
<li>time : 表示时间文本框</li>
<li>datetime-local : 表示本地日期和时间文本框</li>
<li>number : 表示必须输入数字的文本框</li>
<li>range : 表示范围文本框</li>
<li>color : 表示颜色文本框</li>
</ul>
<h3 id="HTML5-属性"><a href="#HTML5-属性" class="headerlink" title="HTML5 属性"></a>HTML5 属性</h3><h4 id="表单属性"><a href="#表单属性" class="headerlink" title="表单属性"></a>表单属性</h4><ul>
<li><p>autofocus ：让元素在页面打开时自动获得焦点</p>
<ul>
<li>input(type=”text”)、select、textarea、button</li>
</ul>
</li>
<li><p>placeholder ：对用户的输入进行提示</p>
<ul>
<li>input(type=”text”)、textarea</li>
</ul>
</li>
<li><p>form ：声明它属于哪个表单，然后就可以将它放在页面的任何位置，而不一定是表单之内</p>
<ul>
<li>input、output、select、textarea、button、fieldset</li>
</ul>
</li>
<li><p>required ：在用户提交时进行检查，检查该元素内一定要有输入内容</p>
<ul>
<li>input(type=”text”)、textarea</li>
</ul>
</li>
<li><p>为 input 元素增加 autocomplete、min、max、multiple(允许多文件上传)、pattern 和 step 属性</p>
</li>
<li><p>为 input 和 button 元素增加 formaction、formenctype、formmethod、formnovalidate 与 formtarget 属性</p>
<p>重载 form 元素的 action、enctype、method、novalidate 与 target 属性</p>
</li>
<li><p>为 fieldset 元素增加了 disabled 属性</p>
</li>
<li><p>novalidate ： 取消提交时进行的有关检查，表单可以被无条件地提交</p>
<ul>
<li>input button from</li>
</ul>
</li>
</ul>
<h4 id="链接属性"><a href="#链接属性" class="headerlink" title="链接属性"></a>链接属性</h4><ul>
<li>media ：目标 URL 是为什么类型的媒介/设备进行优化的，只能在 href 属性存在时使用<ul>
<li>a area</li>
</ul>
</li>
<li>为 area 元素增加了 hreflang 和 rel 属性，以保持与 a 元素、link 元素的一致</li>
<li>为 link 元素增加了新属性 sizes，该属性可以与 icon 元素结合使用(通过 rel 属性)，该属性指定关联图标(icon 元素)的大小</li>
<li>为 base 元素增加了 target 属性，主要目的是保持与 a 元素的一致性</li>
</ul>
<h4 id="其他属性-1"><a href="#其他属性-1" class="headerlink" title="其他属性"></a>其他属性</h4><ul>
<li>reversed ：ol 元素 列表项倒序显示</li>
<li>为 meta 增加了 charset 属性</li>
<li>为 menu 增加了两个新的属性 type 和 label<ul>
<li>label ：为菜单定义一个可见的标注</li>
<li>type ：让菜单可以上下文菜单、工具条与列表菜单三种形式出现</li>
</ul>
</li>
<li>scoped ：style 元素增加，用来规定样式的作用范围</li>
<li>async ：script 元素增加，定义脚本是否异步执行</li>
<li>manifest ：html 元素增加，开发离线 Web 应用程序时它与 API 结合使用，定义一个 URL，在这个 URL 上描述文档的缓存信息</li>
<li>为 iframe 增加三个属性 sandbox、seamless 与 srcdoc，用来提高页面安全性，防止不信任的 Web 页面执行某些操作</li>
</ul>
<h3 id="HTML5-全局属性"><a href="#HTML5-全局属性" class="headerlink" title="HTML5 全局属性"></a>HTML5 全局属性</h3><h4 id="contenteditable-在线编辑"><a href="#contenteditable-在线编辑" class="headerlink" title="contenteditable 在线编辑"></a>contenteditable 在线编辑</h4><p>允许用户可以在线编辑元素的内容，布尔值属性</p>
<ul>
<li>true ：允许编辑</li>
<li>false ：不允许编辑</li>
<li>inherit ：未指定 true 或 false 时，由 inherit 状态决定，看父元素是否可编辑</li>
</ul>
<p>想要保存编辑后的内容，使用 innerHTML 获取</p>
<p>所有主流浏览器都支持 contenteditable 属性</p>
<p>在 JavaScript 中，元素还有一个 isContentEditable 属性，当元素可编辑时，该属性值为 true，反之则为 false</p>
<h4 id="contentmenu-右击菜单"><a href="#contentmenu-右击菜单" class="headerlink" title="contentmenu 右击菜单"></a>contentmenu 右击菜单</h4><p>用于定义 div 元素的上下文菜单，在用户右键单击元素时出现</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">contextmenu</span>=<span class="hljs-string">&quot;mymenu&quot;</span>&gt;</span><br>    上下文菜单<br>    <span class="hljs-tag">&lt;<span class="hljs-name">menu</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;context&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mymenu&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">menuitem</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;微信分享&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">menuitem</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">menuitem</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;微博分享&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">menuitem</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">menu</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<p>目前只有 Firefox 支持 contentmenu 属性</p>
<h4 id="data-自定义属性"><a href="#data-自定义属性" class="headerlink" title="data-* 自定义属性"></a>data-* 自定义属性</h4><p>使用 data-* 可以自定义用户数据</p>
<ul>
<li><p>属性名：不应该包含任何大写字母，在前缀“data-”之后必须至少有一个字符</p>
<ul>
<li><p>多个单词使用：<code>-</code> 连接</p>
</li>
<li><p>脚本中获取或访问属性使用 <code>dataset.对应小驼峰式</code> </p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-animal-type</span>=<span class="hljs-string">&quot;bird&quot;</span>&gt;</span>鸟<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-animal-type</span>=<span class="hljs-string">&quot;fish&quot;</span>&gt;</span>鱼<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-animal-type</span>=<span class="hljs-string">&quot;piggy&quot;</span>&gt;</span>小猪<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> lis = <span class="hljs-built_in">document</span>.getElementByTagName(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; lis.length; i++) &#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(lis[i].dataset.animalType); <span class="hljs-comment">// &lt;--</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></div></td></tr></table></figure></li>
</ul>
</li>
<li><p>属性值：可以是任意字符串</p>
</li>
</ul>
<p>当浏览器（用户代理）解析时，会完全忽略前缀为“data-”的自定义属性</p>
<p>所有主流浏览器都支持 自定义属性</p>
<h4 id="draggable-可被拖动"><a href="#draggable-可被拖动" class="headerlink" title="draggable 可被拖动"></a>draggable 可被拖动</h4><p>定义元素是否可以被拖动，但不是元素位置改变</p>
<p>true、false、auto(定义使用浏览器的默认行为)</p>
<p>此属性常被用在拖放操作中</p>
<h4 id="dropzone-拖动操作"><a href="#dropzone-拖动操作" class="headerlink" title="dropzone 拖动操作"></a>dropzone 拖动操作</h4><p>定义在元素上拖动数据时，是否复制、移动或链接被拖动数据</p>
<ul>
<li>copy ：会产生被拖动数据的副本</li>
<li>move ：会导致被拖动数据被移动到新位置</li>
<li>link ：会产生执行原始数据的链接</li>
</ul>
<p>但是，目前主流浏览器都不支持 dropzone 属性</p>
<h4 id="hidden-隐藏"><a href="#hidden-隐藏" class="headerlink" title="hidden 隐藏"></a>hidden 隐藏</h4><p>所有元素都包含一个 hidden 属性，设置元素的可见状态，true不可见，false可见</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;...&quot;</span> <span class="hljs-attr">hidden</span>&gt;</span>元素隐藏<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></div></td></tr></table></figure>

<p>除了 IE 所有主流浏览器都支持 hidden 属性</p>
<h4 id="spellcheck-拼写-语法检查"><a href="#spellcheck-拼写-语法检查" class="headerlink" title="spellcheck 拼写 语法检查"></a>spellcheck 拼写 语法检查</h4><p>定义是否对元素进行拼写和语法检查，可以对以下内容进行拼写检查：</p>
<ul>
<li>input 元素中的文本值（非密码）</li>
<li>textarea 元素中的文本</li>
<li>可编辑元素中的文本</li>
</ul>
<p>布尔值属性，true检查，false不检查</p>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span> <span class="hljs-comment">&lt;!-- 必须写值，光写spellcheck错误 --&gt;</span><br></code></pre></div></td></tr></table></figure>

<h4 id="translate-翻译"><a href="#translate-翻译" class="headerlink" title="translate 翻译"></a>translate 翻译</h4><p>定义是否应该翻译元素内容，yes翻译，no不翻译</p>
<p>但目前所有主流浏览器都无法正确支持 translate 属性</p>
<p>HTML5 文档链接</p>
<p><a target="_blank" rel="noopener" href="http://www.qianduankaifa.cn/exercise/html5_base/">http://www.qianduankaifa.cn/exercise/html5_base/</a></p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/HTML/">HTML</a>
                    
                      <a class="hover-with-bg" href="/tags/HTML5/">HTML5</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均为本人原创，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/08/04/CSS%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">CSS笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/08/02/%E5%85%AB%E6%9C%88%E6%89%93%E5%8D%A1%E8%AE%A1%E5%88%92/">
                        <span class="hidden-mobile">八月打卡计划</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <img src="/img/agoni.gif" srcset="/img/loading2.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <h5 style="text-align: center; margin-top: 1rem;">谢谢您的光临噢！！！</h5> 
    </div>
  </div>


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <span>张宝文</span> <i class="iconfont icon-love"></i> <span>郑佳丽</span>  
	<!--《添加网站运行时间 -->
<br/>

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date(); 

function createtime() {
    //此处修改你的建站时间或者网站上线时间
    var grt = new Date('07/28/2021 19:00:00');
    now.setTime(now.getTime() + 250);
    days = (now - grt) / 1000 / 60 / 60 / 24;

    dnum = Math.floor(days);
    hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if (String(hnum).length == 1) {
        hnum = "0" + hnum;
    }
    minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if (String(mnum).length == 1) {
        mnum = "0" + mnum;
    }
    seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if (String(snum).length == 1) {
        snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = " 本站已各种夹缝中安全运行 " + dnum + " 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
</script>

<!-- 添加网站运行时间》-->
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/js/local-search.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

  <script>
    function typing(id, title){
        var typed = new Typed('#' + id, {
            strings: [
              '  ',
              title + "&nbsp;",
            ],
            cursorChar: "❤",
            typeSpeed: 150,
            loop: false,
        });
        typed.stop();
        $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
        });
    }

    
        typing("subtitle", document.getElementById('subtitle').title)
    

  </script>













  
<script src="//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/yinghua.js"></script>



<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>

</body>
</html>
